<template>
    <van-nav-bar title="我的订单" left-text="" left-arrow @click-left="goBack" />
    <van-tabs v-model:active="status" sticky @click-tab="getOrderData">
        <van-tab v-for="item in statuslist" :title="item.name" :name="item.id"></van-tab>
    </van-tabs>

    <van-card v-for="item in list" :num="item.info.pronum" :thumb="item.info.product.thumbs_text">
        <template #tag>
            <van-tag type="danger">{{ item.status_text }}</van-tag>
        </template>
        <template #title>
            <h4 style="font-size: 14px; font-weight: bold;">订单号: {{ item.code }}</h4>
        </template>
        <template #desc>
            <div v-if="item.info.attrs">
                <van-tag v-for="items in item.info.attrs" type="success" size="medium" style="margin-right: 10px;">{{
                    items.value }}</van-tag>
            </div>
            <div v-else>
                <van-tag type="danger" size="medium">无商品规格</van-tag>
            </div>
            <h4 style="font-size: 14px; font-weight: bold;">下单时间: {{ item.createtime }}</h4>
        </template>
        <template #price>
            <h4 style="font-size: 14px; font-weight: bold;">订单总价: {{ item.amount }}</h4>
        </template>
        <template #footer>
            <van-button type="primary" size="small" @click="toPages(item.id, '/order/info')">订单详情</van-button>
            <van-button type="danger" size="small" v-if="item.status > 0 && item.status != '4'" @click="toPages(item.id, '/order/refund')">申请退货</van-button>
            <van-button type="success"  size="small" v-if="item.status == '2'" @click="toPages(item.id)">确认收货</van-button>
            <van-button type="success" size="small" v-if="item.status == '4'"  @click="toPages(item.id, '/order/rateInfo')">评价详情</van-button>
            <van-button type="warning" size="small" v-if="item.expresscode" @click="toPages(item.id, '/order/express')">物流详情</van-button>
            <van-button type="danger" size="small" v-if="item.status == '-3' && !item.back_text" @click="toPages(item.id, '/order/refundgoods')">待退货</van-button>
            <van-button type="danger" size="small" v-if="item.status < 0" @click="toPages(item.id, '/order/refundinfo')">退货详情</van-button>
        </template>
    </van-card>

</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/business/index') }
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {})
const statuslist = [
    {
        id: '0',
        name: '全部'
    },
    {
        id: '1',
        name: '已支付'
    },
    {
        id: '2',
        name: '已发货'
    },
    {
        id: '3',
        name: '已收货'
    },
    {
        id: '4',
        name: '已完成'
    },
    {
        id: '-1',
        name: '售后'
    },
]
const status = ref('0')
const list = ref([])
onBeforeMount(() => {
    getOrderData()
})
const getOrderData = async () => {
    let result = await Api.OrderIndex({
        busid: LoginUser.id,
        status: status.value
    })

    if (result.code == 1) {
        list.value = result.data
        list.value.forEach((item) => {
            if (item.info.attrs) {
                item.info.attrs = JSON.parse(item.info.attrs)
            }
        })
    }
}
const toPages = (id, url) => {
    if (url) {
        proxy.$router.push({
            path: url,
            query: {
                orderid: id
            }
        })
    }
    else
    {
        Dialog({
        message:
            '确认是否收货?',
        })
        .then(async() => {
            let result = await Api.OrderReceipt({
                busid: LoginUser.id,
                orderid: id
            })
            if(result.code == 1)
            {
                getOrderData()
                success(result.msg);
            }
            else
            {
                error(result.msg);
            }
        })
        .catch(() => { });
    }
}
</script>
